<template>
    <div class="adminAdd">
        <el-button type="primary">管理员新增</el-button>

        <el-form class="adminAddForm" ref="adminForm" @submit.prevent :model="form" label-width="120px">
            <el-form-item label="管理员名称" prop="adminname" :rules="[ { required: true, message: '请输入管理员名称', trigger: 'blur' }]">
                <el-input v-model="form.adminname"
                ></el-input>
            </el-form-item>
            <el-form-item label="管理员密码" prop="password" :rules="[{type:'string',required:true, message: '请输入管理员密码',trigger:'blur'}]">
                <el-input v-model="form.password" ></el-input>
            </el-form-item>
            <el-form-item label="管理员等级" prop="role" :rules="[{type:'number',required:true,message:'请选择管理员等级',trigger:'change'}]">
                <el-select v-model.number="form.role" clearable placeholder="" @change="roleChangehandler" >
                    <el-option label="超级管理员" :value="1"></el-option>
                    <el-option label="普通管理员" :value="2"></el-option>
                    <el-option label="普通用户" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <!-- 允许访问哪些路由页面 -->
            <el-form-item label="管理员权限" prop="checkedKeys" >
                <!-- node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
                <!-- :default-expanded-keys="[2, 3]"   默认展开(根据node-key) -->
                <!-- :default-checked-keys="[5]"      默认选中(根据node-key) -->
                <el-tree ref="tree" :data="menus" show-checkbox node-key="path" :default-checked-keys="[]"  :props="defaultProps">
                </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitHandler">提交</el-button>
                <el-button type="primary" @click="resetHandler">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {addAdminAPI} from "@/api/admin"; 
import {menus} from "@/router/routes";


export default {
    name: "AdminAddView",
    data() {
        return {
            form: {
                adminname: "",
                password: "",
                role: "",
                checkedKeys: [],
            },
            menus:menus,
            defaultProps: {
                label: 'label',  // 将data中的label属性 作为树状图的标题
                children: 'children', //  将data中的children属性 作为树状图的子分支
            }
        }
    },
    methods:{
        async submitHandler(){
            // console.log("选中的tree结构",this.$refs.tree.getCheckedNodes());
            // console.log("选中的tree结构",JSON.stringify(this.$refs.tree.getCheckedNodes()));
            
            // 获取选中的tree中的 node-key  (反选效果 -> 所有的子项被选中 父项也会被选中输出)
            // console.log("选中的tree结构",this.$refs.tree.getCheckedKeys());
            this.form.checkedKeys = this.$refs.tree.getCheckedKeys();

            // console.log("form",this.form);
            // console.log("form",this.$refs.adminForm);
            this.$refs.adminForm.validate(async (bool)=>{
                console.log(11111,bool);

                if(bool){
                   try{
                        var res =  await addAdminAPI(this.form)
                        console.log("新增成功",res);
                        this.$message.success("新增成功");

                        this.$refs.adminForm.resetFields();
                        this.$refs.tree.setCheckedKeys([]);


                   }catch(err){
                        this.$message.error(err.message);
                   }
                   
                }

            })
            

        },
        resetHandler(){
            
            this.$refs.adminForm.resetFields();
            this.$refs.tree.setCheckedKeys([]);
        },
        roleChangehandler(role){
            console.log(1111,role);
            this.$refs.tree.setCheckedKeys([]);

            if(role==""){
                this.$refs.tree.setCheckedKeys([]);
            }else if(role==1){
                this.$refs.tree.setCheckedKeys(['/home', '/banner',  '/pro', '/admin']);
            }

        }
    },
    mounted(){
        console.log("menus",this.menus);
    }
}
</script>

<style lang="scss" scoped>
.adminAddForm {
    margin-top: 20px;
    width: 600px;
}
</style>